<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div class="welcome-content">
            <div class="brand">
              <div class="logo">钛考</div>
              <div class="subtitle">在线考试系统</div>
            </div>
            <h2>欢迎使用 钛考 在线考试系统</h2>
            <p class="tip">请从左侧菜单进入相应功能模块</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8" v-if="userStore.isAdmin">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-item">
            <div class="stat-label">系统管理</div>
            <div class="stat-value">管理员</div>
            <div class="stat-desc">您可以管理用户、学院、专业、班级</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="userStore.isTeacher">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-item">
            <div class="stat-label">教师功能</div>
            <div class="stat-value">教师</div>
            <div class="stat-desc">您可以创建课程、试卷、管理考试</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" v-if="userStore.isStudent">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-item">
            <div class="stat-label">学生功能</div>
            <div class="stat-value">学生</div>
            <div class="stat-desc">您可以参加考试、查看成绩</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useUserStore } from '../../store/user'

const userStore = useUserStore()
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-content {
  text-align: center;
  padding: 20px;
}

.brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #409eff;
}

.subtitle {
  font-size: 16px;
  color: #606266;
}

.welcome-content h2 {
  margin: 20px 0;
  color: #303133;
}

.tip {
  color: #909399;
  margin-top: 8px;
}

.stat-card {
  height: 100%;
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 10px;
}

.stat-desc {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .logo { font-size: 28px; }
  .subtitle { font-size: 14px; }
  .stat-value { font-size: 24px; }
}
</style>


